<template>
  <div class="index">
    <div class="container">
      <div class="index-top">
        <div class="swiper-box">
          <div class="menu-box">
            <ul class="menu-wrap" @mouseleave="mouseleave">
              <li
                class="menu-item"
                v-for="item in menuList"
                :key="item.type"
                @mouseenter="enter"
              >
                <a href="javascript:;" :class="item.type">{{ item.name }}</a>
              </li>
            </ul>
          </div>
          <div
            v-if="kind"
            class="detail-box"
            @mouseenter="sover"
            @mouseleave="sout"
          >
            <ul class="detail-list">
              <li
                class="detail-item"
                v-for="(item, index) in currentDetail.child"
                :key="index"
              >
                <a :href="item.id ? '/#/product/' + item.id : ''"
                  ><img
                    v-lazy="item.img ? item.img : '/imgs/item-box-1.png'"
                    alt=""
                  /><span>{{ item.name }}</span></a
                >
              </li>
            </ul>
          </div>
          <swiper :options="swiperOption">
            <swiper-slide v-for="(item, index) in sildeList" :key="index">
              <a :href="'/#/product/' + item.id"><img :src="item.img" /></a>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
        <el-row class="abs-box" :gutter="0">
          <el-col class="abs-icon" :span="4"
            ><ul>
              <li v-for="item in absIconList" :key="item.title">
                <a href="javascript:;"
                  ><img v-lazy="item.img" />{{ item.title }}</a
                >
              </li>
            </ul></el-col
          >
          <el-col class="abs-img" :span="20">
            <ul>
              <li>
                <img
                  v-lazy="
                    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d158f243b54d5ec68dd2ac72bd24555d.jpg?w=632&h=340'
                  "
                  alt=""
                />
              </li>
              <li>
                <img
                  v-lazy="
                    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fbff319c7dd00e75c9758acf248d3784.jpg?w=632&h=340'
                  "
                  alt=""
                />
              </li>
              <li>
                <img
                  v-lazy="
                    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340'
                  "
                  alt=""
                />
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="index-main">
      <div class="container">
        <div class="banner">
          <img
            v-lazy="
              '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/96681ef128730fe2970795cbbc327d4a.jpg?thumb=1&w=1226&h=120&f=webp&q=90'
            "
          />
        </div>
        <div class="product-box">
          <h2>手机</h2>
          <el-row :gutter="0">
            <el-col class="pro-left" :span="5">
              <a href="/#/product/35">
                <img
                  v-lazy="
                    '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=234&h=614&f=webp&q=90'
                  "
                />
              </a>
            </el-col>
            <el-col class="pro-right" :span="20">
              <div class="phone-wrap">
                <ul>
                  <li v-for="(item, index) in phoneList" :key="item.id">
                    <span :class="index % 2 === 0 ? 'new-pro' : ''">{{
                      index % 2 === 0 ? '新品' : ''
                    }}</span>
                    <div class="img"><img v-lazy="item.mainImage" /></div>
                    <div class="item-info">
                      <h3 class="title">{{ item.name }}</h3>
                      <p class="desc">{{ item.subtitle }}</p>
                      <p class="price" @click="addCart(item.id)">
                        {{ item.price }}￥
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <service-bar></service-bar>
    <!-- 模态框 -->
    <modal
      title="提示"
      sureText="查看购物车"
      btnType="1"
      modalType="middle"
      :showModal="showModal"
      @close="closeDialog"
      @submit="goToCart"
    >
      <p slot="body">商品添加成功！</p>
    </modal>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'index',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOption: {
        // 自动播放
        autoplay: true,
        // 循环播放
        loop: true,
        // 播放的模式
        effect: 'fade',
        // 播放模式的配置
        fadeEffect: {
          shadowOffset: 100,
          shadowScale: 0.6
        },
        // 分页器
        pagination: {
          // 挂载的地方
          el: '.swiper-pagination',
          // 是否可以点击跳转
          clickable: true
        },
        // 上一页下一页
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      sildeList: [
        {
          id: '42',
          img: '/imgs/slider/slide-1.jpg'
        },
        {
          id: '45',
          img: '/imgs/slider/slide-2.jpg'
        },
        {
          id: '46',
          img: '/imgs/slider/slide-3.jpg'
        },
        {
          id: '',
          img: '/imgs/slider/slide-4.jpg'
        },
        {
          id: '',
          img: '/imgs/slider/slide-1.jpg'
        }
      ],
      menuList: [
        {
          type: 'phone',
          name: '手机 电话卡',
          child: [
            {
              name: '小米cc9',
              img: '/imgs/item-box-1.png',
              id: 30
            },
            {
              id: 31,
              img: '/imgs/item-box-2.png',
              name: '小米8青春版'
            },
            {
              id: 32,
              img: '/imgs/item-box-3.jpg',
              name: 'Redmi K20 Pro'
            },
            {
              id: 33,
              img: '/imgs/item-box-4.jpg',
              name: '移动4G专区'
            }
          ]
        },
        {
          type: 'TV',
          name: '电视 盒子',
          child: [
            {
              name: 'Redmi智能电视X65',
              img:
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/070b329c18c1ab167df2a42564a67813.png?thumb=1&w=40&h=40&f=webp&q=90',
              id: ''
            },
            {
              id: '',
              img:
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/942d4f28d406f3946f0ce551c125c641.png?thumb=1&w=40&h=40&f=webp&q=90',
              name: '小米电视5 PrO 5对'
            },
            {
              id: '',
              img:
                'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5732e8f317eb86bfcb174fbb49d00c4a.jpg?thumb=1&w=40&h=40',
              name: '小米壁画电视65英'
            },
            {
              id: '',
              img:
                'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ca8058c9c776447265b99420ff04e544.png?thumb=1&w=40&h=40',
              name: '小米电视4A 65英寸'
            }
          ]
        },
        {
          type: 'book',
          name: '笔记本 平板',
          child: [
            {
              name: 'RedmiBook 13',
              img:
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aee86bcd8bf491eb78ae234d2e188a66.jpg?thumb=1&w=40&h=40&f=webp&q=90',
              id: ''
            },
            {
              id: '',
              img:
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b32e4db4b53b0c56c6040f094e96d945.png?thumb=1&w=40&h=40&f=webp&q=90',
              name: '显示器'
            },
            {
              id: '',
              img:
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4f45cdc4f94f1f1651095dedb154c2e4.png?thumb=1&w=40&h=40&f=webp&q=90',
              name: '小米笔记本15.6"'
            },
            {
              id: '',
              img:
                'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/131e5d409e62eedb94577cae11c530f1.jpg?thumb=1&w=40&h=40',
              name: '小米平板4'
            }
          ]
        },
        {
          type: 'home',
          name: '家电 插线板',
          child: [
            {
              name: '冰箱',
              img:
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/abeb200aaaee68d4635c6235d3ffb3f3.jpg?thumb=1&w=40&h=40&f=webp&q=90',
              id: ''
            },
            {
              id: '',
              img:
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f7dcbb8c268574041ce0b4b98e591cf1.jpg?thumb=1&w=40&h=40&f=webp&q=90',
              name: '微波炉'
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d93e6a98403262a506c9e9b22293cdae.jpg?thumb=1&w=40&h=40',
              name: '电磁炉'
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d1c8cfb055709db380c6de981a4c894b.jpg?thumb=1&w=40&h=40',
              name: '插线板'
            }
          ]
        },
        {
          type: 'travel',
          name: '出行 穿戴',
          child: [
            {
              name: '手环5',
              img:
                '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/18f75b53afbe8ce2e858cb5622d60613.png?thumb=1&w=40&h=40&f=webp&q=90',
              id: 30
            },
            {
              id: 31,
              img:
                '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/749c779fd3789ba94033da8aaa547dcd.png?thumb=1&w=40&h=40&f=webp&q=90',
              name: '自行车'
            },
            {
              id: 32,
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4e9da27ebbeeb38078910c97173c4671.jpg?thumb=1&w=40&h=40',
              name: '滑板车'
            },
            {
              id: 33,
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/efd04d4a90822e7e2f04a365083f2607.jpg?thumb=1&w=40&h=40',
              name: '无线车充'
            }
          ]
        },
        {
          type: 'mind',
          name: '智能 路由器',
          child: [
            {
              name: '打印机',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5ef6c2d63df78e140afab6ac3c088fac.jpg?thumb=1&w=40&h=40',
              id: ''
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40',
              name: '摄像机'
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d5963e212402fa5ebd2e71dd10c426c.jpg?thumb=1&w=40&h=40',
              name: '小爱音响'
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/81d89cfdb72d0445ed4ef19942d9dedb.jpg?thumb=1&w=40&h=40',
              name: '照相机'
            }
          ]
        },
        {
          type: 'charge',
          name: '电源 配件',
          child: [
            {
              name: '移动电影',
              img:
                '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8c55361386a46857f962e5142baeefcf.png?thumb=1&w=40&h=40&f=webp&q=90',
              id: ''
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5c6e60e48edf17219724faad95963b93.jpg?thumb=1&w=40&h=40',
              name: '手机壳'
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/45dd7a2c4fc3d17d5d261ed3eed7cd15.jpg?thumb=1&w=40&h=40',
              name: '数据线'
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e9e248c899fd895c9267f494ea1aaebf.jpg?thumb=1&w=40&h=40',
              name: '手机贴膜'
            }
          ]
        },
        {
          type: 'live',
          name: '生活 箱包',
          child: [
            {
              name: '小背包',
              img:
                '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f26030d7d914b86daca51233a3ac5f9.jpg?thumb=1&w=40&h=40&f=webp&q=90',
              id: ''
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/aba45662667dceaf4ba0e5b08f44d3a7.jpg?thumb=1&w=40&h=40',
              name: '床垫'
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/59d3a701ac0bbb78f1b1d0ea7ebc7505.jpg?thumb=1&w=40&h=40',
              name: '驱蚊器'
            },
            {
              id: '',
              img:
                '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f628feba0f2f8253f9cc41f9984194a7.jpg?thumb=1&w=40&h=40',
              name: '双肩背包'
            }
          ]
        }
      ],
      kind: '',
      absIconList: [
        {
          title: '小米闪购',
          img:
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48'
        },
        {
          title: '企业团购',
          img:
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48'
        },
        {
          title: 'F码通道',
          img:
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48'
        },
        {
          title: '米粉卡',
          img:
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48'
        },
        {
          title: '以旧换新',
          img:
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48'
        },
        {
          title: '花费充值',
          img:
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48'
        }
      ],
      phoneList: [],
      showModal: false
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    mouseleave () {
      // 鼠标离开把kind清空
      this._timer = setTimeout(() => {
        this.kind = ''
      }, 150)
      // console.log('离开了ul')
    },
    enter (e) {
      this.kind = e.target.querySelector('a').className
      console.log(this.kind)
    },
    sover () {
      // 鼠标进入详情框，清除定时器
      clearTimeout(this._timer)
    },
    sout () {
      // 鼠标离开详情框，把kind置空
      this.kind = ''
    },
    async init () {
      const res = await this.$axios.get('/products', {
        params: {
          categoryId: 100012,
          pageSize: 14
        }
      })
      console.log(res)
      this.phoneList = res.data.list.slice(6, 14)
      console.log(this.phoneList)
    },
    addCart (id) {
      console.log('id: ', id)
      this.$axios
        .post('/carts', {
          productId: id,
          selected: true
        })
        .then(res => {
          console.log(res.data)
          this.$cookies.set('cartCount', res.data.cartTotalQuantity)
          this.showModal = true
        })
        .catch(() => {
        })
    },
    closeDialog () {
      this.showModal = false
    },
    goToCart () {
      this.$router.push('/cart')
    }
  },
  computed: {
    currentDetail () {
      return this.menuList.filter((item) => item.type === this.kind)[0]
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../assets/scss/mixin.scss';
@import './../assets/scss/config.scss';
@import './../assets/scss/index.scss';
</style>
